<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两侧广告跟随</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .img1 {
          position: absolute;
          top: 80px;
          left: 10px;
        }
    
        .img2 {
          position: absolute;
          top: 80px;
          right: 10px;
        }
    
        .header {
          width: 1210px;
          margin: 0px auto;
          text-align: center;
          font: 500 26px/35px "simsun";
          color: red;
          background-color: rgb(245, 245, 245);
        }
    
        div {
          width: 1210px;
          margin: 0 auto;
          text-align: center;
          font: 500 26px/35px "simsun";
          color: red;
        }
      </style>
</head>
<body>
    <img class="img1" src="images/aside.jpg" />
    <img class="img2" src="images/aside.jpg" />
    <div class="header">
      <img src="images/5.png" alt="">
    </div>
    <div class="contain">
      <img src="images/1.png" alt="">
      <img src="images/2.png" alt="">
      <img src="images/2.png" alt="">
    </div>
    <script>
            //当页面向上滑动的时候，屏幕滚动多少，两侧的图片联动向下移动等距离。
            //2)	具体实现步骤如下：
            //a)	获取被卷去的头部的值
            //b)	封装缓动动画方法 animate()
            //c)	移动两个盒子。（缓动移动）
            window.onload=function(){
                var imgArr=document.getElementsByTagName("img");
                window.onscroll=function(){
                var val=scroll().top;
                animate(imgArr[0],val+80);
                animate(imgArr[1],val+80);
            }
            function animate(ele,target){
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                var step = (target-ele.offsetTop)/10;
                step = step>0?Math.ceil(step):Math.floor(step);
                ele.style.top = ele.offsetTop + step + "px";
                console.log(1);
            if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
                ele.style.top = target + "px";
                clearInterval(ele.timer);
                }
            },10);
          }
          function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}
            }
            
    </script>
</body>
</html>